/*
* @Author: yyf
* @Date: 2018/4/10
* @description: 投融资事件 列表页
*/
<template>
    <div>
        <div class="p-30">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="查询">
                            <el-input v-model="eventSearchList.title" @keyup.native.enter="getEventList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label-width="10px">
                            <el-select v-model="eventSearchList.titleType">
                                <el-option 
                                    v-for="item in companySearchNameType" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue-0" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="发布时间">
                            <el-date-picker class="w-100" v-model="eventSearchList.startTime" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1" class="align-center-self">至</el-col>
                    <el-col :span="3">
                        <el-form-item label-width="0px">
                            <el-date-picker class="w-100" v-model="eventSearchList.endTime" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="pull-right align-right">
                        <el-button type="primary" @click="getEventList" round>搜索</el-button>
                        <el-button type="primary" @click="toAdd" round>添加</el-button>
                        <el-button type="primary" @click="delEventById" round>删除</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="标的企业">
                            <el-input placeholder="请输入企业名称" v-model="eventSearchList.companyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="投资方">
                            <el-input v-model="eventSearchList.investName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="退出方">
                            <el-input v-model="eventSearchList.exitName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="轮次">
                            <el-select v-model="eventSearchList.investRound" class="w-100">
                                <el-option 
                                    v-for="item in investRound" 
                                    :key="item.id" 
                                    :value="item.id" 
                                    :label="item.roundName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="信息状态">
                            <el-select v-model="infoStatusList" multiple class="w-100" @change="changeInfoStatus">
                                <el-option 
                                    v-for="item in infoStatus" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="质检状态">
                            <el-select v-model="qualityStatusList" multiple class="w-100" @change="changeQualityStatus">
                                <el-option 
                                    v-for="item in qualityStatus" 
                                    :key="item.dictValue" 
                                    :value="item.dictValue" 
                                    :label="item.dictName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col>
                        <span class="m-r-15 ca-info-color">已选中（{{selectNum}}）个</span>
                        <span class="m-r-15 ca-info-color">已编辑信息:{{eventCountInfo.imperfectCount}}条</span>
                        <span class="m-r-15 ca-info-color">已发布信息:{{eventCountInfo.publishCount}}条</span>
                        <span class="ca-info-color-red">质检未通过信息:{{eventCountInfo.qualityCount}}条</span>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table stripe :data="eventListData" class="m-t-20" @selection-change="handleSelectionChange">
            <el-table-column label="全选" type="selection"></el-table-column>
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="标题" prop="title" show-overflow-tooltip></el-table-column>
            <el-table-column label="标的企业" prop="companyName" show-overflow-tooltip></el-table-column>
            <el-table-column label="轮次" prop="investRound">
                <template slot-scope="scope">
                    {{scope.row.investRound | getRoundNameById(scope.row.investRound)}}
                </template>
            </el-table-column>
            <el-table-column label="发布时间" prop="publishTime" sortable="column">
                <template slot-scope="scope">
                    <el-row>
                        <span>{{scope.row.publishTime | cmsMoment}}</span>
                    </el-row>
                    <el-row>
                        <span>{{scope.row.publishName}}</span>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="更新时间" prop="modifyTime" sortable="column">
                <template slot-scope="scope">
                    <template slot-scope="scope">
                    <el-row>
                        <span>{{scope.row.modifyTime | cmsMoment}}</span>
                    </el-row>
                    <el-row>
                        <span>{{scope.row.modifyName}}</span>
                    </el-row>
                </template>
                </template>
            </el-table-column>
            <el-table-column label="信息状态" prop="infoStatus">
                <template slot-scope="scope">
                    {{scope.row.infoStatus | getDicNameById('infoStatus')}}
                </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="qualityStatus" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.qualityStatus | getDicNameById('qualityStatus')}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="toDetail(scope.row.id)">编辑</el-button>
                    <el-button type="text" @click="toOperateHistory(scope.row.id, scope.row.title)">信息详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="align-center m-t-20">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="eventSearchList['pageParam.pageIndex']"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
    import Vue from 'vue';
    import { Component, Watch } from 'vue-property-decorator';
    import { EventVo, EventDelDto, PageParam } from '../../../api/Interface';
    import { EventSearchDto } from '../../../service/event/Interface';
    import EventService from '../../../service/event/index';
    import moment from 'moment';
    import { getParamsForList, setParamsForList } from '../../../libs/utils';

    @Component({
        components: {}
    })
    
    export default class CompanyList extends Vue {
        public companySearchNameType = this.$store.state.user.dictionary.dicList.searchTitleType; // 搜索框内容（查询）类型：1：按标题，2：按编辑人; 3:按ID
        public infoStatus = [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.infoStatus]; // 信息状态
        public qualityStatus = [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.qualityStatus]; // 质检状态
        public investRound = [{id: '', roundName: '全部'}, ...this.$store.state.user.dictionary.roundList]; // 轮次
        // 统计信息
        // public eventCountInfo: EventCountInfoVo = {} as EventCountInfoVo;
        public eventCountInfo: object = {};
        public msg = 123;
        public totalCount: number = 0;
        public selectNum: number = 0;
        public pageParam: PageParam = { pageIndex: 1, pageSize: 10} as PageParam; //分页
        public qualityStatusList: Array<string> = [];
        public infoStatusList: Array<string> = [];
        public eventSearchList: EventSearchDto = {titleType: 1} as EventSearchDto;
        public eventDelDto: EventDelDto = {} as EventDelDto;
        public eventListData: Array<EventVo> = [];

        // refs
        public $refs: {};
        // watch
        @Watch('msg')
        public onChildChanged(val: string, oldVal: string) {
            return val + '***';
        }

        // 声明周期钩子
        public mounted() {
            // 获取local中存储的搜索条件
            const routerName = this.$root.$route.name;
            const localParams = getParamsForList(routerName);
            this.eventSearchList = Object.assign({}, this.eventSearchList, localParams.searchParams);
            this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
            this.infoStatusList = localParams.infoStatusList ? localParams.infoStatusList : [];
            this.qualityStatusList = localParams.qualityStatusList ? localParams.qualityStatusList : [];
            // 获取local中存储的搜索条件 end
            this.getEventCountInfo();
            this.getEventList();
        }
        // 方法
        public handleSizeChange(val: number) {
            this.msg = val;
        }
        public handleCurrentChange(val: number) {
            this.pageParam.pageIndex = val;
            this.getEventList();
        }
        // 选择全部信息状态
        public changeInfoStatus(val: string[]) {
            if (!(val.indexOf('') === -1)) {
                this.infoStatusList = [];
                const infos = this.$store.state.user.dictionary.dicList.infoStatus;
                infos.map(item => {
                    this.infoStatusList.push(item.dictValue);
                });
            }
        }
        // 选择全部质检状态
        public changeQualityStatus(val: string[]) {
            if (!(val.indexOf('') === -1)) {
                this.qualityStatusList = [];
                const qualitys = this.$store.state.user.dictionary.dicList.qualityStatus;
                qualitys.map(item => {
                    this.qualityStatusList.push(item.dictValue);
                });
            }
        }
        // 跳转到添加页
        public toAdd() {
            this.$router.push({ name: 'transaction-detail', params: { eventId: '-1', tabIndex: '0' }});
        }
        // 跳转到详情页
        public toDetail(id: string) {
            this.$router.push({ name: 'transaction-detail', params: { eventId: id, tabIndex: '0' }});
        }
        // 跳转到操作历史
        public toOperateHistory(id: number, title: string) {
            this.$router.push({ name: 'operation-history', params: { businessName: 'transaction', businessId: id.toString(), businessType: '2', title: encodeURIComponent(title) }});
        }
        // 获取统计信息
        public async getEventCountInfo() {
            const eventCount = await EventService.getEventCountInfo(17);
            this.eventCountInfo = eventCount;
        }
        // 获取列表信息
        public async getEventList() {
            this.eventSearchList['pageParam.pageIndex'] = this.pageParam.pageIndex;
            this.eventSearchList['pageParam.pageSize'] = this.pageParam.pageSize;
            this.eventSearchList.eventType = 17;
            if (this.eventSearchList.startTime) {
                this.eventSearchList.startTime = moment(this.eventSearchList.startTime).format('YYYY-MM-DD');
            } else {
                delete this.eventSearchList.startTime;
            }
            if (this.eventSearchList.endTime) {
                this.eventSearchList.endTime = moment(this.eventSearchList.endTime).format('YYYY-MM-DD');
            } else {
                delete this.eventSearchList.endTime;
            }
            if (this.qualityStatusList.length) {
                this.eventSearchList.qualityStatus = this.qualityStatusList.join(',');
            } else {
                delete this.eventSearchList.qualityStatus;
            }
            if (this.infoStatusList.length) {
                this.eventSearchList.infoStatus = this.infoStatusList.join(',');
            } else {
                delete this.eventSearchList.qualityStatus;
            }
            // local中存当前搜索条件 
            const params = {
            pageParam: this.pageParam,
            searchParams: this.eventSearchList,
            infoStatusList: this.infoStatusList,
            qualityStatusList: this.qualityStatusList
            };
            const routerName = this.$root.$route.name;
            setParamsForList(params, routerName);
            // local中存当前搜索条件 end
            const res = await EventService.getEventPage(this.eventSearchList);
            if (res.resCode === '0') {
                this.eventListData = res.data.resultData;
                this.totalCount = res.data.totalCount;
            }
        }
        // 选中每一项
        public handleSelectionChange(val: object[]) {
            this.selectNum = val.length;
            this.eventDelDto.eventIds = [];
            val.map(( item: EventVo ) => {
                this.eventDelDto.eventIds.push(item.id);
            });
        }
        // 删除
        public delEventById() {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await EventService.delEventById(this.eventDelDto);
                if (res.resCode === '0') {
                    this.$message.success('删除成功！');
                    this.getEventList();
                }
            });
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .w-100 {
        width: 100%;
    }

    .align-center-self {
        text-align: center;
        line-height: 40px;
    }
</style>